<template>
  <div id="msite">
    <msite-nav-bar :title="detailedAddress.name" />
    <scroll ref="scroll" class="content">
      <msite-swiper :arr="arr" @handleSwiperBtn="handleSwiperBtn" />
      <msite-restaurants-list :restaurants="restaurants" />
    </scroll>
  </div>
</template>

<script>
import Scroll from "components/common/betterScroll/Scroll";

import MsiteNavBar from "./childComps/MsiteNavBar";
import MsiteSwiper from "./childComps/MsiteSwiper";
import MsiteRestaurantsList from "./childComps/MsiteRestaurantsList";

import {SET_GEO_HASH} from 'store/mutations.type.js'
import { mapGetters } from "vuex";

import { getSpecificAddress, getSwiper, getRestaurants } from "network/msite";
export default {
  data() {
    return {
      detailedAddress: {},
      swiperList: [],
      arr: [],
      restaurants: [],
      addressInfo: {},
    };
  },
  activated() {
    let geohash = "";
    geohash =
      this.$route.query.geohash === "[object Object]"
        ? JSON.parse(localStorage.getItem("placeHistory"))[0].geohash
        : this.$route.query.geohash;
    this.$store.commit(SET_GEO_HASH, geohash);
    this.getSpecificAddress(geohash);
    this.getSwiper(geohash);
    this.getRestaurants(
      "latitude=" + this.detailedAddress.latitude,
      "longitude=" + this.detailedAddress.longitude
    );
  },
  watch: {
    swiperList(swiperList) {
      const arr1 = [];
      const arr2 = [];
      this.arr = [arr1, arr2];
      for (let i = 0; i < this.swiperList.length; i++) {
        if (i < 8) {
          arr1.push(this.swiperList[i]);
        } else {
          arr2.push(this.swiperList[i]);
        }
      }
    },
  },
  computed: {
    ...mapGetters(["geohash"]),
  },
  methods: {
    getSpecificAddress(geohash) {
      getSpecificAddress(geohash).then((res) => {
        this.detailedAddress = res;
        this.$bus.$emit("getSpecificAddress", res);
      });
    },
    getSwiper(geohash) {
      getSwiper(geohash).then((res) => {
        this.swiperList = res;
      });
    },
    getRestaurants(latitude, longitude) {
      getRestaurants(latitude, longitude).then((res) => {
        this.restaurants = res;
      });
    },
    handleSwiperBtn(title) {
      this.$router.push({
        path: "/food",
        query: { geohash: this.geohash, title: title },
      });
    },
  },
  components: {
    Scroll,
    MsiteNavBar,
    MsiteSwiper,
    MsiteRestaurantsList,
  },
};
</script>
<style lang="less" scoped>
#msite {
  position: relative;
  height: 100vh;
  background-color: #f5f5f5;
  .content {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 49px;
    overflow: hidden;
  }
}
</style>